<!--申请退款-->
<template>
  <div>
    <van-nav-bar title="申请退货退款" left-arrow @click-left="onClickLeft" :border="false">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" />
    </van-nav-bar>
    <part1></part1>
    <!-- <part5
      :detailInfo="detailInfo"
      :cansubmit="cansubmit"
      @func="getMsgFormSon"
      @func1="getMsgFormSon1"
      @func2="getMsgFormSon2"
      @func3="getMsgFormSon3"
      @func4="getMsgFormSon4"
      @reload="init"
    ></part5> -->
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_3" style="margin-left:8px;">服务类型</span>
          <span class="c_7" >退货退款</span>
        </div>
      </div>
    </div>

    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3" style="margin-left:5px;">退货方式</span>
          <span class="c_7" style="float:right">卖家同意退货后买家寄出退货商品</span>
        </div>
      </div>
    </div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3" style="margin-left:5px;">退款原因</span>
          <span class="c_7" v-if="this.refundReason=='商品质量问题'">商品质量问题</span>
          <span class="c_7" v-if="this.refundReason=='尺寸/容量与商品描述不符'">尺寸/容量与商品描述不符</span>
          <span class="c_7" v-if="this.refundReason=='收到商品与描述不符'">收到商品与描述不符</span>
          <span class="c_7" v-if="this.refundReason=='卖家发错货'">卖家发错货</span>
          <span class="c_7" v-if="this.refundReason=='收到商品少件或破损'">收到商品少件或破损</span>
          <span class="c_7" v-if="this.refundReason=='其他'">其他</span>
          <span class="c_4" v-if="this.refundReason==''">必填</span>
        </div>
        <div class="c_2" @click="popup1" v-if="this.refundReason==''">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup1" v-if="this.refundReason!=''">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>

    <div class="c1">
      <div class="c_item1">
        <div class="c_1" style="">
          <span class="c_5" style="margin-top:10px;margin-right:5px;">*</span>
          <span class="c_31">退款金额：</span>
          <span class="c_5" style="margin-top:10px;" @change="price">
              <van-field v-model="refundMoney" placeholder="必填" />
          </span>
        </div>
        <div class="c_1" style="margin-bottom:5px;">
          <span class="c_6" style="margin-left:5px;">可修改，最多不可超过 ¥{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}}</span>
        </div>
        <span class="c_6" style="margin-left:5px;color:red;">退款成功将收取1%“退款手续费”</span>
      </div>
    </div>

    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_3">退款说明：</span>
          <span class="cc" @change="note">
              <van-field v-model="refundNote" placeholder="选填" @click="note" style="width:250px;"/>
          </span>
        </div>
      </div>
    </div>

    <van-popup v-model="showReason1" position="bottom" :style="{ height: '65%' }">
      <div class="reason_title">退款原因</div>
      <div class="reason">
        <div class="reason_item">
          <div>商品质量问题</div>
          <div>
            <van-radio name="商品质量问题" checked-color="#ff6000" v-model="refundReason" @click="question1"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>尺寸/容量与商品描述不符</div>
          <div>
            <van-radio name="尺寸/容量与商品描述不符" checked-color="#ff6000" v-model="refundReason" @click="question2"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>收到商品与描述不符</div>
          <div>
            <van-radio name="收到商品与描述不符" checked-color="#ff6000" v-model="refundReason" @click="question3"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>卖家发错货</div>
          <div>
            <van-radio name="卖家发错货" checked-color="#ff6000" v-model="refundReason" @click="question4"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>收到商品少件或破损</div>
          <div>
            <van-radio name="收到商品少件或破损" checked-color="#ff6000" v-model="refundReason" @click="question5"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>其他</div>
          <div>
            <van-radio name="其他" checked-color="#ff6000" v-model="refundReason" @click="question6"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
    <!-- <part4></part4> -->
    <div style="padding:20px">
    <div  class="title" style="margin-bottom:10px;">上传凭证 <span style="font-size:12px;color:#e5e5e5e;">(最多6张)</span></div>
    <div class="imgList">
      <div v-for="(item,index) in imgList" class="imgContain" :key="index">
        <div class="clear" @click="delImg(index)">
          <img src="../../../../../static/img/lanhu/43.png" alt style="width: 13px;height: 13px;" />
        </div>
        <img :src="item" alt="" />
      </div>

      <div v-if="imgList.length < 6" @click="getImgUrl(imgList.length,6)" class="imgContain">
        <img src="../../../../../static/img/lanhu/87.png" alt="" />
      </div>
    </div>
  </div>

    <div class="btn" @click="apply"  v-if="cansubmit">提交申请</div>
    <div class="btn1" style="backgroud-color:red"  disabled v-else>提交申请</div>
  </div>
</template>

<script>
import part1 from "_c/markets/refund/part1.vue";
import part5 from "_c/markets/refund/part5.vue";
import part4 from "_c/markets/refund/part4.vue";
import { getFun, getTimer } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  name: "orderDetail",
  components: {
    part1,
    part5,
    part4
  },
  data() {
    return {
      url1: this.$api + "/marketorderservice/api/v1/market/orders", // 获取订单详情的接口
      url2: this.$api + "/marketorderservice/api/v1/market/refund/apply/add", // 获取订单详情的接口
      url3: this.$api + "/marketorderservice/api/v1/market/getRefundByOrdersId", // 获取订单详情的接口
      url4: this.$api + "/marketorderservice/api/v1/market/getRefundByOrdersId", // 获取订单详情的接口
      ordersId: "",
      userId: "",
      isBuyer: false, // 用于绑定是否是买家
      isSeller: false, // 用于绑定是否是卖家
      detailInfo: {}, // 绑定订单对象
      refundType: "2", //退款类型
      goodsState: "", //货物状态
      refundMoney: "", //退款金额
      NewrefundMoney:'',
      refundReason: "", //退款原因
      refundImage: "", //图片
      imgList: [], // 用于绑定已上传的图片数组（组件内部使用，在删除图片时用到）
      refundNote: "", //备注
      refundId: "", //退款id
      tip:'',//提示
      cansubmit:true,
      refundId:'',//用来判断的退款Id
      lastname:'',
      backType:'5',
      showReason1: false,
    };
  },
  methods: {
    init(goodsState,refundReason,refundMoney){
      this.goodsState=goodsState;
      this.refundReason=refundReason;
      this.refundMoney=refundMoney;
    },
    getMsgFormSon(data) {
      this.refundType = data;
    },
    getMsgFormSon1(data) {
      this.goodsState = data;
    },
    getMsgFormSon2(data) {
      this.refundReason = data;
    },
    getMsgFormSon3(data) {
      this.refundNote = data;
    },
    getMsgFormSon4(data) {
      this.refundMoney = data;
    },
    // 获取图片地址后的回调
    callJSGetImgUrl(str) {
      this.imgList = this.imgList.concat(str.split(","));
      this.refundImage = this.imgList.join();
    },
    // 删除图片
    delImg(index) {
      this.imgList.splice(index, 1);
      this.refundImage = this.imgList.join();
    },
    //初始化
    getordersDetail() {
      let that = this;
      this.$Axios.Get(this.url3 + "/" + this.ordersId).then(function(res) {
        if(res.data){
           that.goodsState = res.data.goodsState;
           that.refundNote = res.data.refundNote;
           that.refundReason = res.data.refundReason;
           if(res.data){
             that.imgList = res.data.refundImage.split(',');
             that.refundImage = res.data.refundImage;
           }
        }
      });
    },
    getData() {
      let that = this;
      this.$Axios2
        .Get(this.url1 + "/" + this.ordersId + "/" + this.userId)
        .then(function(res) {
          // 判定是买家还是卖家
          if (res.data.orders.userId == that.userId) {
            that.isBuyer = true;
          }
          if (res.data.orders.suserId == that.userId) {
            that.isSeller = true;
          }
          that.detailInfo = res.data.orders;
          // that.refundMoney = res.data.orders.ordersPrice + res.data.orders.goodsFreight;
          that.NewrefundMoney = res.data.orders.ordersPrice + res.data.orders.goodsFreight;
          that.refundId = res.data.orders.refundId;
        });
    },
     //初始化
    getordersDetail() {
      let that = this;
      this.$Axios.Get(this.url4 + "/" + this.ordersId).then(function(res) {
        if(res.data){
           that.goodsState = res.data.goodsState;
           that.refundNote = res.data.refundNote;
           that.refundReason = res.data.refundReason;
           that.refundImage = res.data.refundImage;
          //  that.refundMoney = res.data.refundMoney;
           that.NewrefundMoney = res.data.orders.ordersPrice + res.data.orders.goodsFreight;
          //  that.$emit('reload',that.goodsState,that.refundReason,that.refundMoney)
        }
      });
    },
    popup() {
      this.showReason = true;
      this.refundReason="";
    },
    popup1() {
      this.showReason1 = true;
    },
    popup2(){
      this.showReason2 = true;
    },
    popup3(){
      this.showReason3 = true;
    },
    type(){
      this.refundType = '1'
      // this.$emit('func',this.refundType)
    },
    types(){
      this.refundType = '2'
      // this.$emit('func',this.refundType)
    },
    state(){
      this.goodsState = '1'
      // this.$emit('func1',this.goodsState)
    },
    states(){
      this.goodsState = '2'
      // this.$emit('func1',this.goodsState)
    },
    question1(){
      this.refundReason = '商品质量问题'
      // this.$emit('func2',this.refundReason)
    },
    question2(){
      this.refundReason = '尺寸/容量与商品描述不符'
      // this.$emit('func2',this.refundReason)
    },
    question3(){
      this.refundReason = '收到商品与描述不符'
      // this.$emit('func2',this.refundReason)
    },
    question4(){
      this.refundReason = '卖家发错货'
      // this.$emit('func2',this.refundReason)
    },
    question5(){
      this.refundReason = '收到商品少件或破损'
      // this.$emit('func2',this.refundReason)
    },
    question6(){
      this.refundReason = '其他'
      // this.$emit('func2',this.refundReason)
    },
    question7(){
      this.refundReason = '快递一直未送到'
      // this.$emit('func2',this.refundReason)
    },
    question8(){
      this.refundReason = '未按约定时间发货'
      // this.$emit('func2',this.refundReason)
    },
    question9(){
      this.refundReason = '快递无跟踪记录'
      // this.$emit('func2',this.refundReason)
    },
    note(){
      // this.$emit('func3',this.refundNote)
    },
    price(){
      // this.$emit('func4',this.refundMoney)
    },
    close() {
      this.showReason = false;
      this.showReason1 = false;
      this.showReason2 = false;
      this.showReason3 = false;
    },
    apply() {
      // let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
	   	// if(!reg.test(this.refundMoney)){
	   	//  	this.$toast('请输入正确的退款金额')
	   	//  	return false	   	 	
      // }
      if (this.refundReason == "") {
        this.$toast("请选择退款原因！");
      }else if(Number(this.refundMoney)>Number(this.NewrefundMoney)){
        this.$toast("退款金额不得大于实际支付金额！")
      }else if(Number(this.refundMoney) < 0){
        this.$toast("退款金额不得小于0")
      }else if(this.refundMoney == ""){
        this.$toast("请输入退款金额！")
      }else {
        let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
	   	  if(!reg.test(this.refundMoney)){
	   	 	   this.$toast('请输入正确的退款金额')
	   	 	   return false  	 	
        }
        let that = this;
        let url2 = this.$api + "/marketorderservice/api/v1/market/refund/apply/add";
        let params = {
          ordersId: this.ordersId,
          userId: this.userId,
          refundType: "2", //退款类型
          refundReason: this.refundReason, //退款原因
          refundMoney: this.refundMoney,
          goodsState: "2",
          refundNote: this.refundNote, //备注
          refundImage: this.refundImage //图片
        };
        this.$Axios.Post(url2, params).then(function(res) {
          if(res.data){
            that.refundId = res.data.refundId;
            that.tip = '1'
            let arg = '[{"userId":"' + that.userId + '"},{"ordersId":"' + that.ordersId + '"},{"refundId":"' + that.refundId + '"},{"tip":"' + that.tip + '"},{"backType":"' + that.backType + '"}]';
            that.link("/market/orders/refunds", arg);
            sessionStorage.setItem("disabledbtn", "true");
          }else{
            that.$toast(res.messageList[0].message)
          }
        });
      }
    }
  },
  created(){
    var lastname = sessionStorage.getItem("disabledbtn");
    if(lastname=='true'){
      this.cansubmit = false
    }
  },
  mixins: [publicFun], //混入
  mounted() {
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.userId = this.$router.currentRoute.query.userId;
    if(this.cansubmit==false){
      this.getordersDetail();
    }
    this.getData();
    window.callJsGetLocation = this.callJsGetLocation; // 挂载获取地址回调方法
    window.callJSGetImgUrl = this.callJSGetImgUrl; // 挂载获取图片回调方法
  }
};
</script>

<style scoped="" lang="scss">
.wrap {
  padding: 25px 30px;
  text-align: center;
}
.foot {
  position: fixed;
  bottom: 5px;
  text-align: center;
  margin: 0 auto;
  left: 20%;
}
.btn {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #ffd630;
  position: fixed;
  bottom: 0;
  z-index: 2000;
}
.btn1 {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #dddddd;
  position: fixed;
  bottom: 0;
  z-index: 2000;
}
.imgList:after{content:"";display:block;clear:both;}
.imgList .imgContain{float: left;margin-right: 3%;width:23.5%;margin-bottom: 10px;position: relative;}
.imgList .imgContain img{width: 100%;height: 80px;}
.imgList .imgContain:nth-child(3n){margin-right: 0;}
.clear{position: absolute;right: -6px;top: -6px;}
.a {
  padding: 15px;
}
.b {
  width: 100%;
}
.text {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.txt {
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  float: right;
}
.c {
  padding: 15px;
  padding-bottom: 0px;
  background: #fff;
  /* margin-bottom: 10px; */
  border-bottom: 1px solid #f8f8f8;
}
.c1 {
  padding: 5px 15px;
  background: #fff;
  margin-bottom: 10px;
  border-bottom: 1px solid #f8f8f8;
}
.c11 {
  padding: 5px 15px;
  background: #fff;
}
.c_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_item1 {
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_1 {
  align-items: center;
  display: flex;
}
.c_3 {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  display:flex;
}
.c_31 {
  padding: 10px 0 0 0;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.c_4 {
  margin-left: 15px;
  color: #aaa;
  display:flex;
  font-size:13px;
}
.c_7 {
  margin-left: 15px;
  font-size: 13px;
  /* font-weight: bold; */
  color: #333333;
  display:flex;
}
.cc{
  /* margin-left: 70px; */
  /* margin-top: -20px; */
  color: #aaa;
  display:flex;
  font-size:13px;
}
.icon {
  vertical-align: -2px;
}
.c_2 {
  color: #aaa;
  font-size: 14px;
}
.c_5 {
  font-size: 13px;
  color: #f22613;
}
.c_6 {
  padding-top: 10px;
  font-size: 12px;
  color: #999999;
}

.content {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #e5e5e5;
}
.tit {
  padding: 5px;
}
.t_1 {
  font-size: 12px;
  padding: 5px;
  color: #333333;
  font-weight: bold;
}
.t_2 {
  padding: 5px 0 10px 5px;
  font-size: 12px;
  color: #999999;
}
.van-cell {
  padding: 0;
}
/* .reason_title {
  text-align: center;
  padding: 25px 0;
  font-size: 20px;
} */
.reason_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  color: rgba(51, 51, 51, 1);
}
.reason {
  padding: 0 10px;
}
.reason_item {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  margin-bottom: 10px;
}
.reason_item:nth-last-child(1) {
  border: none;
}
.btn {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #ffd630;
  position: fixed;
  bottom: 0;
}
</style>